<template>
  <div :class="['ticket', type == 4 ? 'ticket2' : '']">
    <div v-show="type == 0 || type == 1" class="type1">
      <div class="type1_top" v-if="type == 1">
        <div class="left">{{ dataObj.cardName }}</div>
        <div class="right">{{ childActive== 0?(dataObj.verifyAmount/100).toFixed(2):dataObj.verifyAmount }}{{childActive== 0?'元':'次'}}</div>
      </div>
      <div class="middle">
        {{ type == 0 ? `${dataObj.couponName}-` : "卡号 "
        }}{{ type == 0 ? dataObj&&dataObj.couponCodes[0] : dataObj.cardNo }}
      </div>
      <div class="bottom">
        来自{{ dataObj.sourceName?dataObj.sourceName:'商户后台' }} {{ dataObj.createTime }}
      </div>
    </div>
    <div v-show="type == 2 || type == 3" class="type2">
      <div>
        {{
          type == 2
            ? dataObj.bookingProduct && dataObj.bookingProduct.name
            : dataObj.items && dataObj.items[0].title
        }}
        * {{ type == 2 ? dataObj.num : dataObj.items && dataObj.items[0].num }}
      </div>
      <div v-if="type == 2">
        <div
          v-if="
            dataObj.bookingProduct && dataObj.bookingProduct.productType == 0
          "
        >
          时间：{{ dataObj.beginDay.split(" ")[0] }} 至
          {{ dataObj.endDay.split(" ")[0] }}共{{
            Object.keys(dataObj.roomPrices).length
          }}晚
        </div>
        <div v-else>
          {{ computTime2(dataObj.bookingProduct) }}共{{
            computTime(dataObj.bookingProduct)
          }}小时
        </div>
      </div>
      <div v-else>提货时间 {{ dataObj.updateTime }}</div>
      <div>订单号：{{ dataObj.orderNo }}</div>
      <div>
        来自{{ dataObj.sourceName }}
        &#12288;
        {{
          type == 2
            ? dataObj.bookingStatusRecord &&
              dataObj.bookingStatusRecord.createTime
            : dataObj.createTime
        }}
      </div>
    </div>
    <div v-show="type == 4">
      <div class="type3">
        <div>{{ dataObj.prototypeId }}</div>
        <div>{{ dataObj.name }}</div>
        <div>{{ dataObj.num }}张</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // type = 父类activeTab   dataObj单条数据
  props: ["type", "dataObj",'childActive'],
  computed: {
    computTime() {
      return function getData(data) {
        if (!data) {
          return "";
        }
        if (data.periodDuration % 30 === 0) {
          return data.periodDuration / 60;
        }
        return (data.periodDuration / 60).toFixed(1);
      };
    },
    computTime2() {
      return function getData(data) {
        if (!data) {
          return "";
        }
        let periodStartTime = this.minuteToHour(data.periodStartTime);
        let periodEndTime = this.minuteToHour(data.periodEndTime);
        return `${this.dataObj.beginDay.split(" ")[0]} ${periodStartTime} ~ ${
          periodEndTime === "00:00" ? "24:00" : periodEndTime
        }`;
      };
    },
  },
  methods: {
    minuteToHour(curTime) {
      if (!curTime) {
        return "00:00";
      }
      let rv = "";
      if (curTime >= 1440) {
        rv = rv + "次日";
        curTime = curTime - 1440;
      }
      let hours = Math.floor(curTime / 60);
      let minutes = curTime % 60;
      return (
        rv +
        (hours < 10 ? "0" + hours : hours) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes)
      );
    },
  },
};
</script>
<style lang="less" scoped>
.ticket2 {
  border: none !important;
  margin-top: 40px !important;
  padding: 0px 20px !important;
}
.ticket {
  border-bottom: 1px solid #ececec;
  margin-top: 20px;
  padding-bottom: 35px;
  .type1,
  .type2 {
    .type1_top {
      display: flex;
      justify-content: space-between;
    }
    :first-child {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
    }
    > :last-child {
      opacity: 0.8;
    }
    > :not(:first-child) {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3d3d3d;
      margin-top: 25px;
    }
  }
  .type3 {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #131313;
    & > :first-child,
    > :last-child {
      flex: 1;
    }
    > :nth-child(2) {
      flex: 2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>